<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flexbox 水平居中</title>
    <style>
        /*
        水平方向：左中右
        垂直方向：上中下
        */


        /*
        左上角：
        flex-direction水平，
        主轴方向justify-content左边
        */
        .container2 {
            margin-top: 10px;
            display: flex;
            flex-direction: row; /*默认，水平*/
            justify-content: start;
            height: 300px;
            width: 300px;
            background-color: #f0f0f0;
            font-size: 40px;
            color: red;
        }


        /*
      右上角：flex-direction水平，主轴方向justify-content右边
      */
        .container3 {
            margin-top: 10px;
            display: flex;
            flex-direction: row;
            justify-content: end;
            height: 300px;
            width: 300px;
            background-color: #f0f0f0;
            font-size: 40px;
            color: red;
        }


        /*
   左下角：
   */
        .container4 {
            margin-top: 10px;
            display: flex;
            flex-direction: column; /*垂直*/
            justify-content: end; /*垂直的下方 */
            height: 300px;
            width: 300px;
            background-color: #f0f0f0;
            font-size: 40px;
            color: red;
        }


        /*
左下角：
*/
        .container5 {
            margin-top: 10px;
            display: flex; /* 将容器设置为 Flexbox 容器 */
            flex-direction: column; /*主轴：垂直*/
            justify-content: end; /*主轴下方 */
            align-items: end;/*测轴：水平右边*/
            height: 300px; /* 设置容器高度以便于观察效果 */
            width: 300px;
            background-color: #f0f0f0;
            font-size: 40px;
            color: red;
        }

            /*
             居中
             */
        .container {
            margin-top: 10px;
            display: flex; /* 将容器设置为 Flexbox 容器 */
            flex-direction: row; /*默认，主轴水平*/
            justify-content: center; /* 主轴方向：水平居中子元素 */
            align-items: center; /* 测轴方向：垂直居中子元素 */
            height: 300px; /* 设置容器高度以便于观察效果 */
            width: 300px;
            background-color: #f0f0f0;
            font-size: 40px;
            color: red;
        }
        /*
       左居中，主轴：垂直，在中间，测轴水平在左边
       */
        .container6 {
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: start;
            height: 300px;
            width: 300px;
            background-color: #f0f0f0;
            font-size: 40px;
            color: red;
        }
        /*
        上居中，主轴：垂直，在上方，测轴水平在中间
        */
        .container7 {
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            justify-content: start;
            align-items: center;
            height: 300px;
            width: 300px;
            background-color: #f0f0f0;
            font-size: 40px;
            color: red;
        }
        /*
       右居中，主轴：flex-direction垂直，justify-content居中， align-items测轴水平在右边
       */
        .container8 {
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: end;
            height: 300px;
            width: 300px;
            background-color: #f0f0f0;
            font-size: 40px;
            color: red;
        }
        /*
      下居中，主轴：flex-direction垂直，justify-content底部， align-items测轴水平在中间
     */
        .container9 {
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            justify-content: end;
            align-items: center;
            height: 300px;
            width: 300px;
            background-color: #f0f0f0;
            font-size: 40px;
            color: red;
        }
    </style>
</head>
<body>


<div class="container2">
    坐上角
</div>
<div class="container3">
    右上角
</div>
<div class="container4">
    左下角
</div>
<div class="container5">
    右下角
</div>
<div class="container">
    居中
</div>
<div class="container6">
    左居中
</div>
<div class="container7">
    上居中
</div>
<div class="container8">
    右居中
</div>
<div class="container9">
    下居中
</div>
</body>
</html>
